<template>
  <div>
    <div class="top">
            <span><el-avatar :size="70" src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2138.svg"></el-avatar></span>
            <div class="username">波比</div>
            <div><el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2158.svg"></el-image>3级铲屎官</div>
    </div>
    <div class="pig">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2169.png"></el-image>
        <span class="pig-text">我的宠物档案</span>
        <span><el-link type="primary">添加宠物</el-link></span>
    </div>
    <div class="pigs">
        <span>
            <div class="pig-name">
                <span>小黄 </span>
                <span style="color:deepskyblue"><i class="el-icon-male"></i></span>
            </div>
            <div style="">
                <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2177.svg"></el-image>  
                <span> 1岁6个月</span> &emsp;
                <span>未绝育</span> 
            </div>
        </span>
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2180.png"></el-image>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2166.png"></el-image>
        <span> 我的发布</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2184.png"></el-image>
        <span> 我的收藏</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2188.png"></el-image>
        <span> 我的聊天</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2192.png"></el-image>
        <span> 我的钱包</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2196.png"></el-image>
        <span> 打卡签到</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2200.png"></el-image>
        <span> 我的群</span>
    </div>
    <div class="power">
        <el-image src="https://cdn3.axureshop.com/demo/2107587/images/%E6%88%91%E7%9A%84/u2204.png"></el-image>
        <span> 设置</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.top{
    background-color:orange;
    padding-top:  80px;
    padding-bottom: 10px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    color: #fff;
    margin-bottom: 15px;
}
.username{
    font-size: large;
    font-weight: 600;
}
.pig{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.pig-text{
    font-weight: 600;
    padding-right: 140px;
}
.pigs{
    border-radius: 10px;
    box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    text-align: left;
}
.pig-name{
    font-weight: 600;
    margin: 10px;
}
.power{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}
</style>